<template>
  <div class="cart">
    <template>
      <div>
        <van-empty
          class="custom-image"
          image="https://img01.yzcdn.cn/vant/custom-empty-image.png"
          description="购物车为空"
          v-if="cart.length === 0"
        >
        <span class="tips">去选购商品</span>
        <router-link to="/home"  class="link">Go -></router-link>
        </van-empty>
      </div>
    </template>
    <template>
      <div>
           <van-swipe-cell
        v-for="prod in cart"
        :key="prod.id"
      >
        <van-card
          :price="prod.price"
          :title="prod.title"
          class="goods-card"
        >
          <template #num>
            <van-stepper
              :value="prod.amount"
              theme="round"
              button-size="22"
              @change="modifyAmount({id: prod.id, amount: $event})"
            />
          </template>
          <!-- 缩略图 -->
          <template #thumb>
            <van-checkbox
              :value="prod.checked"
              @click="changeChecked({id: prod.id})"
            />
            <div class="van-image" style="width: 100%; height: 100%; margin-left: 12px;">
              <img :src="prod.image" class="van-image__img" style="object-fit: cover;">
            </div>
          </template>
        </van-card>
        <template #right>
          <van-button
            square
            text="删除"
            type="danger"
            class="delete-button"
            @click="removeFromCart({id: prod.id})"
          />
        </template>
      </van-swipe-cell>
      </div>
    </template>
    <!-- 提交订单 -->
    <van-submit-bar :price="totalMoney" button-text="提交订单">
      <van-checkbox
       :value ="allChecked"
       @click="checkAll({checked: !allChecked})"
      >全选</van-checkbox>
      <template #tip>
        你的收货地址不支持同城送, <span>修改地址</span>
      </template>
    </van-submit-bar>
  </div>
</template>

<script>
import { mapMutations, mapGetters } from 'vuex'
export default {
  name: 'Cart',
  computed: {
    ...mapGetters(['allChecked', 'totalMoney']),
    cart() {
      return this.$store.state.shoppingCart.cart
    },
  },
  methods: {
    ...mapMutations(['removeFromCart', 'modifyAmount', 'changeChecked', 'checkAll']),
  },
}
</script>

<style lang="less" scoped>
  .goods-card {
    margin: 0;
    background-color: #fff;
  }

  .delete-button {
    height: 100%;
  }
  .custom-image .van-empty__image {
    width: 90px;
    height: 90px;
  }
  .van-card__title van-multi-ellipsis--l2{
    font-weight: 600;
    color: darkorange;
  }
  .tips{
    font-size: 20px;
    font-weight: 700;
  }
  .link{
    font-size: 20px;
    font-weight: 700;
    color: darkorange;
    text-decoration: underline;
  }
   /deep/.van-card__thumb {
    display: flex;
    width: 240px;
  }
  /deep/.van-checkbox {
    overflow: visible;
  }
</style>
